<template>
	<view class="zwz-comment" :style="{paddingBottom:'110rpx'}">
		<view v-if="showLike" class="text-bold text-black text-xl margin">全部评论（{{comments.length}}）</view>
		<!-- <view class="comment-num" v-if="comments.length == 0">{{ comments.length == 0 ? '快来评论吧~' : comments.length + '条评论' }}</view> -->
		<!-- 没有评论 -->
		<view class="" v-if="comments.length == 0">
			<u-empty mode="message" icon="/static/mescroll-empty.png" text="还没有人评价,迅速抢占一楼">
			</u-empty>
		</view>
		<scroll-view scroll-y="true" style="height: auto;" @scrolltolower="lower" v-if="comments.length!=0">
			<view class="comment-item-main" v-for="(item, index) in comments" :key="item.id" :id="index">
				<view class="comment-item">
					<view class="left">
						<image v-if="item.avatar" :src="item.avatar" class="img" ></image>
						<image v-else src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202306/3ccea7f5e6cb71501684eac670c866fa.jpg" class="img"></image>
					</view>
					<view class="content">
						<view class="flex justify-between">
							<view class="title-name">{{ item.nickname || '六零家人' }}</view>
							<view class="btm-back" v-if="userInfo.id == item.uid"  @click="commonDelete(item.id)" style="color: #4095E5;">
								删除
							</view>
						</view>
						<view class="content-text">
							<!-- <text>{{ item.content }}</text> -->
							 <rich-text :nodes="replaceEmoji(item.content)"></rich-text>
						</view>
						<view class="content-btm align-center">
							<view class="flex flex-sub align-center">
								<text>{{ item.create_time_text }}</text>
								<view @click="apiSupportoragainst(index,-1,1)" class="flex align-center margin-lr-sm"><u-icon name="thumb-up"  :color="thumbUpColor(item,'support_status')" size="20" ></u-icon>
									<block v-if="item.support_num">{{ item.support_num }}</block>
									<block v-else>赞同</block>
								</view>
								<!-- <view @click="apiSupportoragainst(index,0,2)" class="flex align-center"><u-icon name="thumb-down" :color="thumbUpColor(item,'against_status')" size="20"></u-icon>
									<block v-if="item.against_num">{{ item.against_num }}</block>
									<block v-else>反对</block>
								</view> -->
							</view>
							<text class="btm-back" style="margin-left: 0;" @click="replyComment(item.nickname, item.id, 2, index, item)">回复</text>
						</view>
					</view>
			
				</view>
				<!-- 二级 -->
				<view v-if="showReplyList.indexOf(item.id) !== -1">
					<view class="comment-item items" v-for="(reply,iindex) in item.children" :key="reply.id">
						<view class="left">
							<image v-if="reply.avatar" :src="reply.avatar" class="img"></image>
							<image v-else src="https://llkj-wechat.oss-cn-hangzhou.aliyuncs.com/images/202306/3ccea7f5e6cb71501684eac670c866fa.jpg" class="img"></image>
						</view>
						<view class="content">
							<view class="flex justify-between">
								<view class="title-name">
									<view>{{ reply.nickname||'六零家人' }}</view>
									<view v-if="reply.superNickname">@</view>
									<view v-if="reply.superNickname">{{ reply.superNickname }}</view>
								</view>
								<view class="btm-back" v-if="userInfo.id == reply.uid"  @click="commonDelete(reply.id)" style="color: #4095E5;">
									删除
								</view>
							</view>
							<view class="content-text">
								<!-- <text>{{ reply.content }}</text> -->
								<rich-text :nodes="replaceEmoji(reply.content)"></rich-text>
							</view>
							<view class="content-btm">
								<view class="flex flex-sub align-center">
									<text>{{ reply.create_time_text }}</text>
									<view @click="apiSupportoragainst(index,iindex,1)" class="flex align-center margin-lr-sm"><u-icon name="thumb-up"  :color="thumbUpColor(reply,'support_status')" size="20" ></u-icon>
										<block v-if="reply.support_num">{{ reply.support_num }}</block>
										<block v-else>赞同</block>
									</view>
									<!-- <view class="flex align-center"><u-icon name="thumb-down" :color="thumbUpColor(reply,'against_status')" size="20"></u-icon>
										<block v-if="reply.against_num">{{ reply.against_num }}</block>
										<block v-else>反对</block>
									</view> -->
								</view>
								<!-- <text class="btm-back" style="margin-left: 0;"
									@click="replyComment(reply.nickname, reply.superCommentId, 3, index, reply)">回复</text> -->
							</view>
						</view>
				
					</view>
				</view>
				<view class="spread" v-if="item.children.length > 0" @click="isShowReply(item.id, index)">
					<text>{{ showReplyList.indexOf(item.id) !== -1 ? '收起' : '展开' + item.children.length + '条回复' }}</text>
					<text :class="showReplyList.indexOf(item.id) !== -1 ? 'up' : 'down'"></text>
				</view>
			</view>
		</scroll-view>
	
		<!-- <view class="comment-btm">
			<input type="text" :placeholder="placeholderComment" :focus="iptFocus" :value="value" @input="input" />
			<button :type="commentText ? 'primary' : 'default'" @click="sendCourseComment(CommentId, superUserId, tier)">发送</button>
		</view> -->
		<!-- 发布评论 -->
		<view class="navigation list" >

			<view class="right" style="padding-bottom: 10rpx;">
				<div class="left" style="flex-grow: 1;">
					<div class="inputBox">
						<!-- <u-input  :placeholder="placeholderComment" :focus="iptFocus" @blur="inputBlur" @change="input" border="surround" shape="circle" v-model="valueInput"></u-input> -->
						 <view class="text-gray" @click="tankComit" style="border: 1px solid #dadbde;border-radius: 38rpx;height: 76rpx;line-height: 70rpx;padding-left: 20rpx;" >
						 	发布评论
						 </view>
						<!-- <textarea :placeholder="placeholderComment" cursor-spacing="10" confirm-type="null"  :focus="iptFocus" @keyboardheightchange="inputBlur"   class="input-text"  v-model="valueInput"  @linechange="confirmte" :style="{ height: textareaHeight + 'px',width:'100%' }"></textarea> -->
						<!-- <u--textarea  :placeholder="placeholderComment" confirm-type="null"  :focus="iptFocus" @keyboardheightchange="inputBlur"  height="20" :showConfirmBar="false" v-model="valueInput" :fixed="true" @linechange="confirmte"  border="surround"></u--textarea> -->
					</div>
				</div>
				<!-- <view class="margin-left-sm " @click="emjjShow">
					<text class="cuIcon-emoji lg" style="font-size: 50rpx;"></text>
				</view> -->
				<div class="right"  style="width: auto;padding-left: 0rpx;">
					<div class="iconBox margin-left-sm" @click="isLickBtn" style="flex-shrink: 0;" v-if="showLike">
						<u-icon name="thumb-up-fill" :color="is_like == 1 ? '#E1265D' : '#b0b0b0'"  size="28"></u-icon>
						<text style="padding: 0rpx 0 0 2rpx;" v-if="like_num == 0">点赞</text>
						<text style="padding: 0rpx 0 0 2rpx;" v-else>{{ like_num  }}</text>
					</div>
					<div class="iconBox margin-left-sm" @click="posterBtn" v-if="showShare">
						<u-icon name="share-square" size="28"></u-icon>
					</div>
				</div>			
			</view>
		</view>
	
		<!-- 评论弹框 -->
		<u-popup :show="commentShow" mode="bottom"  :round="10" @close="commentShowClose">
			<view class="padding" style="padding-bottom: 20rpx;">
				<view class="">
					<textarea 
					:show-confirm-bar="false"  :adjust-position="false" :fixed="true" :auto-blur="true" 
					:placeholder="placeholderComment" 
					@focus="onfocus"
					@blur="onblur"
					cursor-spacing="0" confirm-type="null" :auto-focus="iptFocus" :focus="iptFocus"  
					class="textarea-text"  v-model="valueInput"  ></textarea>
					<!-- <BaseInput v-model="valueInput" :emoji.sync="emoji" @input="baseInput"></BaseInput> -->

				</view>
				<view class="flex align-center justify-center margin-top">
					<view class="flex align-center" style="flex-grow: 1;">
						<text class="cuIcon-emoji lg" style="font-size: 60rpx;"  @click="emjjShow"></text>
						<image mode="widthFix" @click="addEmoji('[玫瑰][玫瑰][玫瑰]')" class="emojiWh" :src="emojiHttp + 'emoji_88@2x.png'"></image>
						<image mode="widthFix" @click="addEmoji('[强][强][强]')" class="emojiWh" :src="emojiHttp + 'emoji_45@2x.png'"></image>
						<image mode="widthFix" @click="addEmoji('[爱心][爱心][爱心]')" class="emojiWh" :src="emojiHttp + 'emoji_83@2x.png'"></image>
						<image mode="widthFix" @click="addEmoji('[坏笑][坏笑][坏笑]')" class="emojiWh" :src="emojiHttp + 'emoji_30@2x.png'"></image>
					</view>
					<view style="width: 160rpx;">
						<u-button :disabled="isdisabled" @click="sendCourseComment(CommentId, superUserId, tier)" type="primary" size="small" text="发表" shape="circle" color="#E1265D"></u-button>
					</view>
				</view>
			</view>
			<!-- 表情 -->
			<!-- <u-transition :show="showPannel" mode="fade"> -->
			<view v-if="showPannel">
				<swiper class="emoji-swiper" indicator-dots="true" duration="150">
					<swiper-item v-for="(page,pid) in emojiList" :key="pid">
						<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
							<image mode="widthFix" :src="emojiHttp + em.url"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- </u-transition> -->
			<view class="" :style="{height:keywordHight+'px'}">
				
			</view>
		</u-popup>
		
		<!-- 完善头像和昵称 -->
		<block >
			<edit-avatar :show="editAvatarShow" @close="editAvatarShow = false"></edit-avatar>
		</block>
	</view>
</template>

<script>
import {emojiList,emojiHttp} from './emoji.js' //表情包
import BaseInput from './contenteditableInput.vue' //表情包
import editAvatar from '@/components/pagesCircle/editAvatar/index.vue';
export default {
	name: 'zwz-comment',
	components:{
		//contenteditable:contenteditableInput
		editAvatar,
		BaseInput
	},
	props: {
		comments: {
			type: Array,
			default: () => {
				return [];
			}
		},
		value: '',
		like_num: {
			type: Number,
			default: 0 //1代表自己
		},
		is_like: {
			type: Number,
			default: 0 //1代表自己
		},
		showShare:{
			type:Boolean,
			default: true
		},
		showLike:{
			type:Boolean,
			default: true
		},
		famdata:{  //传过来的额外参数 是个对象
			type:Object,
			default: ()=>{
				return {}
			}
		},
	},
	data() {
		return {
			// 修改头像及昵称
			editAvatarShow:false,
			isdisabled:false,
			heightDiff:0, //软键盘的高度
			emoji:'',
			keywordHight:0, //键盘的高度
			commentShow:false, //评论弹框
			textareaHeight:40,
			paddingHeight:0, //表情包的高度
			userInfo:'',
			showPannel: false, //表情包展示
			emojiList:emojiList,   //表情包列表
			emojiHttp:emojiHttp,
			valueInput:'',
			showReplyList: [],
			placeholderComment: '发条评论吧~',
			iptFocus: false,
			layer: 1,
			superCommentId: null,
			src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
		};
	},
	mounted() {
		console.log(emojiList)
		this.emojiList = emojiList
		
		//用户
		this.userInfo =  this.customeInfoGet()
		
		//软键盘的高度
	　　let _sysInfo = uni.getSystemInfoSync()
	    console.log({_sysInfo})
	　　this.heightDiff = _sysInfo.screenHeight - _sysInfo.windowHeight
	},
	updated() {
	},
	methods: {
		// 展开、收起
		isShowReply(id, index) {
			if (this.showReplyList.indexOf(id) == -1) {
				this.showReplyList.push(id);
				this.$emit('reply-click', this.book);
			} else {
				let index = this.showReplyList.indexOf(id);
				this.showReplyList.splice(index, 1);
			}
		},
		// 点赞
		commentLike(item) {
			this.$emit('comment-like', item);
		},
		//赞同和反对颜色样式
		thumbUpColor(item,obj){
			let color = "#333";
			if(item[obj]){
				color = "#E1265D";
			}
			return color;
		},
		//支持和反对 leve层级-1收一级 ， cate1是支持 2反对
		apiSupportoragainst(index,leve=-1,cate = 1){
			
			let id = 0;
			if(leve == -1){ //一级
				id  = this.comments[index].id
				// console.log(this.comments[index].id)
			}else{ //二级
				id  = this.comments[index].children[leve].id
				// console.log(this.comments[index].children[leve], leve)
			}
			
			let parms = {
				id:id,
				cate,
				relation_id: this.famdata.relation_id||0,
				type: this.famdata.type || 0,
			}
			this.$circleApi.supportoragainst(parms).then(res=>{

				if(leve == -1){ //一级
				   		//取消支持/反对
				   		if(this.comments[index].support_status == 1){
				   			if(cate == 1){
				   				this.$set(this.comments[index],"support_status", 0)
				   				let num  = Number(this.comments[index].support_num) - 1
				   				this.$set(this.comments[index],"support_num",num)
				   			}
				   			// if(cate == 2){
				   			// 	this.$set(this.comments[index],"against_status", 0)
				   			// 	let num  = Number(this.comments[index].against_num) - 1
				   			// 	this.$set(this.comments[index],"against_num",num)
				   			// }
				   		}else{
				   			//点亮
				   			if(cate == 1){
				   				this.$set(this.comments[index],"support_status", 1)
				   				let num  = Number(this.comments[index].support_num) + 1
								// console.log({num})
				   				this.$set(this.comments[index],"support_num",num)
				   				// if(this.comments[index].against_status == 1){ //
				   				// 	this.$set(this.comments[index],"against_status", 0)
				   				// 	let num  = Number(this.comments[index].against_num) - 1
				   				// 	this.$set(this.comments[index],"against_num",num)
				   				// }
				   			}
				   			// if(cate == 2){
				   			// 	this.$set(this.comments[index],"against_status", 1)
				   			// 	let num  = Number(this.comments[index].against_num) + 1
				   			// 	this.$set(this.comments[index],"against_num",num)
				   			// 	if(this.comments[index].support_status == 1){ //
				   			// 		this.$set(this.comments[index],"support_status", 0)
				   			// 		let num  = Number(this.comments[index].support_num) - 1
				   			// 		this.$set(this.comments[index],"support_num",num)
				   			// 	}
				   			// }
				   			
				   		}
					
				}else{ //二级
					if(this.comments[index].children[leve].support_status == 1){
						if(cate == 1){
							this.$set(this.comments[index].children[leve],"support_status", 0)
							let num  = Number(this.comments[index].children[leve].support_num) - 1
							this.$set(this.comments[index].children[leve],"support_num",num)
						}
					}else{
						if(cate == 1){
							this.$set(this.comments[index].children[leve],"support_status", 1)
							let num  = Number(this.comments[index].children[leve].support_num) + 1
							this.$set(this.comments[index].children[leve],"support_num",num)
						}
					}
				}
			})
		},
		// 回复评论
		replyComment(userNickName, id, tier, index, reply) {
			
			
			
			this.$circleApi.postUsernicknameandavatar().then(res=>{
				if(res.usename && res.uphoto){
			
			this.iptFocus = true;
			this.placeholderComment = '回复@' + userNickName;
			this.superCommentId = id;
			this.superUserId = userNickName;
			this.layer = tier;
			this.CommentIndex = index;
			uni.getSelectedTextRange({
				success:res=>{
					console.log("软键盘")
				}
			})
			this.$emit('reply', index, id, userNickName, tier, reply)
			//内容清空
			this.valueInput = '';
			//评论弹框弹出
			this.commentShow = true
			//this.iptFocus = true
			//this.$refs.imitate.onFocus()
			//表情包关闭
			this.showPannel = false
				}else{
					//完善昵称和头像
					this.editAvatarShow = true
				}
							
			}).catch(err=>{
							 
			})
		
		},
		// 发送评论
		sendCourseComment() {
			this.isdisabled =true
			
			this.$emit('send-comment', this.layer, this.superCommentId);
			
		},	
		input() {
			this.$emit('input', this.valueInput);
		},
		lower() {
			this.$emit('lower');
		},
		isLickBtn(){
			this.$emit('isLickFun', this.is_like)
		},
		posterBtn(){
			this.$emit('myPoster')
		},
		//删除
		commonDelete(id){
			let parms = {
				id:id
			}
			this.$circleApi.commentDel(parms).then(res=>{
				uni.$u.toast("删除成功")
				//刷新列表接口
				this.$emit('commen-list')
			})
		},
		// 表情-------------------
		//添加表情
		addEmoji(em) {
			//this.iptFocus= true
			this.valueInput += em.alt || em;
			// this.emoji = {
			// 	src:emojiHttp + 'emoji_60@2x.png',
			// 	name:"[折磨]",
			// }
			// em.name = em.alt
			// em.src = emojiHttp + em.url
			// console.log({em})
			// this.emoji = em
		},
		emjjShow(){
			this.keywordHight = 0
			this.showPannel = !this.showPannel; //表情包展示
			this.iptFocus= false
			let height = 0;
			if(this.showPannel ){
				height  = 65
			}
			this.paddingHeight = height;
			
		},
		//显示时候替换
		replaceEmoji(str) {
			
			let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
				//console.log("item: " + item);
				for (let i = 0; i < this.emojiList.length; i++) {
					let row = this.emojiList[i];
					for (let j = 0; j < row.length; j++) {
						let EM = row[j];
						if (EM.alt == item) {
							//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
							//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
							/* let onlinePath = 'https://www.xxx.com/emoji/'
							let imgstr = '<img width="40px" src="' + onlinePath + EM.url + '">'; */
							let imgstr = '<img width="28px" src="'  + emojiHttp +EM.url + '">';
							//console.log("imgstr: " + imgstr);
							return imgstr;
						}
					}
				}
			});
			// console.log("dddd",replacedStr);
			return '<div style="">' + replacedStr + '</div>';
		},
		//line改变
		confirmte(e){
			
		},
		//点击评论弹框
		tankComit(){
			
			this.$circleApi.postUsernicknameandavatar().then(res=>{
				if(res.usename && res.uphoto){
					
				this.valueInput = '';
				this.commentShow = true
				//this.iptFocus = true 
				this.commentreply(0)
				}else{
					//完善昵称和头像
					this.editAvatarShow = true
				}
							
			}).catch(err=>{
							 
			})
		
		},
		//弹框关闭
		commentShowClose(){
			this.commentShow = false
			this.iptFocus=false 
			this.commentreply(0) //修改成顶级评论
			this.isdisabled = false
		},
		//修改成顶级评论
		commentreply(type = 0){
			if(!type){
				//修改顶级pid
				this.layer = 1
				this.superCommentId = null
				this.placeholderComment = '发条评论吧~';
				this.$emit('reply', 0, 0)
			}
		},
		//获得焦点
		onfocus(e){
			console.log(e);
			this.iptFocus= true
			if(!e){
				return
			}
			if(e.detail.height){ //表情包隐藏
				this.showPannel = false
			}
			console.log("this.heightDiff" ,this.heightDiff)
			if(e.detail.height>this.heightDiff){
				this.keywordHight = e.detail.height-this.heightDiff
			}else{
				this.keywordHight = e.detail.height
			}
			
		},
		onblur(e){
			console.log(e);
			this.iptFocus= false
			this.keywordHight = 0
		},
		baseInput(value){
			console.log(value)
		},
		inputBlur(){
			console.log(131321321)
			this.commentShowClose()
		}
	}
};
</script>

<style lang="scss" scoped>
	//
	.emojiWh{
		width: 60rpx;
		height: 60rpx;
		margin: 0 16rpx;
	}
	
	// 文本域
	.textarea-text{
		border: 0px solid #dadbde !important;
		height: 160rpx;
		padding: 20rpx;
		width: 100%;
		background-color: #dadbde;
		box-sizing: border-box;
		border-radius: 16rpx;
	}
	
	.list {  
			padding-bottom: 16rpx !important;  
			padding-bottom: constant(safe-area-inset-bottom) !important;
			padding-bottom: env(safe-area-inset-bottom) !important;
		}  
	
.zwz-comment {
	// height: 1000rpx;
	height: auto;
	width: 100vw;
	background-color: #fff;
	padding-bottom: 100rpx;
	// overflow: scroll;
}

.zwz-comment .comment-num {
	text-align: center;
	color: #c1c6cc;
	height: 40rpx;
	margin-top: 10rpx;
}

.comment-item-main {
	margin-bottom: 40rpx;

	.comment-item {
		display: flex;
		padding: 0 20rpx;

		.left {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			overflow: hidden;

			.img {
				width: 80rpx;
				height: 80rpx;
			}
		}

		.content {
			flex: 1;
			margin: 0 20rpx;

			.title-name {
				color: #bbbbbb;

				/* display: inline-block; */
				view {
					max-width: 150rpx;
					display: inline-block;
					margin-right: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.content-text {
				/* width: 480rpx; */
				font-size: 16px;
				margin: 20rpx 0;
			}

			.content-btm {
				color: #bbbbbb;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-between;

				.btm-back {
					margin-left :160rpx;
					font-size: 16px;
					color:#4095E5 ;
				}
			}
		}

		.right {
			height: 70rpx;

			.img-like {
				image {
					display: block;
					width: 50rpx;
					height: 50rpx;
					margin-top: 20rpx;
				}
			}
		}
	}

	.spread {
		color: #bbbbbb;
		margin-left: 80rpx;
		height: 17px;
		position: relative;

		.down {
			width: 0;
			height: 0;
			position: absolute;
			margin-left: 5px;
			top: 7px;
			border-right: 8px solid transparent;
			border-left: 8px solid transparent;
			border-bottom: 8px solid transparent;
			border-top: 8px solid #bbbbbb;
		}

		.up {
			width: 0;
			height: 0;
			position: absolute;
			margin-left: 5px;
			bottom: 4px;
			border-right: 8px solid transparent;
			border-left: 8px solid transparent;
			border-bottom: 8px solid #bbbbbb;
			border-top: 8px solid transparent;
		}
	}
}

.items {
	margin-left: 40rpx;
}

.comment-btm {
	height: 100rpx;
	width: 100%;
	display: flex;
	/* position: absolute; */
	bottom: 0;
	background-color: #fff;
	border-top: 2rpx solid #e0e0e0;

	input {
		height: 80rpx;
		width: 400rpx;
		border-radius: 20rpx;
		background-color: #f3f3f3;
		margin-left: 80rpx;
		margin-top: 10rpx;
		padding: 10rpx;
	}

	button {
		height: 80rpx;
		margin-top: 10rpx;
	}
}

.comment-like-num {
	display: inline-block;
	width: 50rpx;
	text-align: center;
}

.navigation {
	position: fixed;
	bottom: 0;
	z-index: 100;
	width: 100%;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 16rpx 0 40rpx;




	.right {

		font-size: 28rpx;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;

		.left {
			width: 60%;
		}

		.right {
			width: 38%;
			display: flex;
			justify-content: space-between;
			padding-left: 30rpx;

			.iconBox {
				display: flex;
				align-items: center;
			}
		}

		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
			width: 100%;
			height: 71rpx;
			font-size: 36rpx;
			text-align: center;
		}

		.cart {
			background-color: #E1265D;
			margin-right: 30rpx;
		}

		.buy {
			background-color: #E1265D;
		}
	}
}

	.emoji-swiper {
		height: 60vw;
		swiper-item {
			margin:0 10rpx;
			display: flex;
			align-content: flex-start;
			flex-wrap: wrap;
			view {
				width: 16vw;
				height: 13vw;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 9vw;
					height: 9vw;
				}
			}
		}
	}

</style>
